<template>
    <!-- 对话框表单 -->
    <el-dialog
        class="ba-operate-dialog operate-log-dialog"
        :close-on-click-modal="false"
        :model-value="props.show"
        @close="baTable.toggleForm"
        min-width="400" 
        width="850"
        style="max-width: 100%;"
        :before-close="close"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">操作记录</div>
        </template>
        <el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
            <Table ref="tableRef"></Table>
        </el-scrollbar>
        
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, provide, onMounted, reactive } from 'vue'
import baTableClass from '/@/utils/baTable'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'

const emit = defineEmits(["hideShipmentStatusLog", "loadShipmentStatusLog"])

defineOptions({
    name: 'operateLog',
})

const { t } = useI18n()


interface Props {
    show: boolean
    id: number
}

const props = defineProps<Props>()


// 关闭选择样品的弹窗
const close = (done: () => void) => {
    emit("hideShipmentStatusLog")
    done();
}

const tableRef = ref()
const optButtons: OptButton[] = defaultOptButtons([])
/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/order.OperateLog/'),
    {
        pk: 'id',
        column: [
            // { type: 'selection', align: 'center', operator: false },
            { label: t('更改前'), prop: 'before_change_text', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            { label: t('更改后'), prop: 'after_change_text', align: 'center', operator: 'RANGE', sortable: 'custom'  },
            { label: t('操作时间'), prop: 'create_time_text', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE', sortable: false },
            // { label: t('Operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: ['all'],
    },
    {
        defaultItems: {  },
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.table.filter!.id = props.id;
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})

</script>

<style scoped lang="scss">


</style>
